<template>
    <div class="Internet">
        <lRTitle :text="statusTitle"></lRTitle>
        <div class="content">
          <div class="top">
            <div class="left">
              <img src="@/assets/aiScreen/jsym.png" alt="jsym" class="leftBg"/>
              <span class="title1">加速域名</span>
              <span class="data">89次</span>
            </div>
            <div class="right">
              <img src="@/assets/aiScreen/zdym.png" alt="zdym" class="rightBg"/>
              <span class="title1">阻断域名</span>
              <span class="data">89次</span>
            </div>
          </div>
          <div class="bottom">
            <div class="left">
              <img src="@/assets/aiScreen/sxym.png" alt="sxym" style="position: absolute;left:-1%;" class="leftBg"/>
              <span class="title1">上行加速</span>
              <span class="data">189 KB/S</span>
            </div>
            <div class="right">
              <img src="@/assets/aiScreen/xxym.png" alt="xxym" class="rightBg"/>
              <span class="title1">下行加速</span>
              <span class="data">89 KB/S</span>
            </div>
          </div> 
        </div>
    </div>
      
</template>
  
  <script>
  import lRTitle from './lRTitle.vue'
  export default {
    name:"netAcceleration",
    props: {
    },
    data () {
      return {
          statusTitle:"网络加速"
      }
    },
    created () {},
    mounted () {},
    watch: {},
    computed: {},
    methods: {},
    components: {
      lRTitle
    }
  }
  </script>
  <style scoped>
  .Internet {
      display: flex;
      flex-direction: column;
      height: 20%;
  }
  .content {
      display: flex;
      overflow: auto;
      position: relative;
      flex-direction: column;
      flex: 1;
      margin: 0 15px 0px 50px;
  }
  .top {
      display: flex;
      position: absolute;
      width: 100%;
      height: 50%;
      flex-direction: row;
      flex-wrap: nowrap;
  }
  .bottom {
      position: absolute;
      display: flex;
      bottom: 0;
      width: 100%;
      height: 50%;
      /* background-color: bisque; */
  }
  .left {
    position: absolute;
    width: 50%;
    height: 100%;
    
    /* background-color: aqua; */
  }
  .right {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    /* background-color: antiquewhite; */
  }
  .title1 {
    position: absolute;
    left: 32%;
    top: 10%;
    color: #9faebb;
  }
  .data {
    position: absolute;
    left: 32%;
    top: 35%;
    margin-top: 5px;
    color: #fff;
  }
  </style>